// pages/detail/[id].js
import Layout from '../../components/Layout'
import { Box, Divider, Heading, Text } from '@chakra-ui/react'
import { css } from '@emotion/react'
import axios from 'axios'
import { baseURL } from '../../axiosConfig'

const DetailContent = css`
    padding: 10px;
    & > p {
        font-size: 14px;
        margin-bottom: 10px;
    }
    & > img {
        margin-bottom: 10px;
        display: block;
    }
`

export default function Detail ({detail}) {
    console.log(detail)
    return <Layout key={detail.id}>
        <Box maxW={1200} mx="auto" mt="70px">
            <Heading as="h2" size="xl">
                {detail.title}
            </Heading>
            <Heading as="h4" size="lg" mt="10px" color="gray.500" fontWeight="light">
                {detail.sub}
            </Heading>
            <Divider mt="10px" />
            <Box overflow="hidden" mt="10px">
                <Text float="left">作者:{detail.author}</Text>
                <Text float="right">发布时间:{detail.publish}</Text>
            </Box>
            <Divider mt="10px" />
            <Box css={DetailContent} dangerouslySetInnerHTML={{__html: detail.content}}></Box>
        </Box>
    </Layout>
}

// 获取到用户能够访问到的所有的路由参数
export async function getStaticPaths () {
    // ['1', '2']
    let { data } = await axios.get('/api/videos', {baseURL})
    // [{params: {id: 1}}]
    let paths = data.map(id => ({params: { id }}))
    return {
        paths,
        fallback: false // 获取非参数范围内的路由显示404
    }
}

// 根据参数获取其对应的数据
export async function getStaticProps ({params}) {
    let id = params.id
    let { data: detail } = await axios.get(`/api/detail?id=${id}`, {baseURL})
    return {
        props: {
            detail
        }
    }
}